<template>
  <div>
    <!--
      action：上传接口地址，必传参数
      name:上传接口文件对应的字段名
      show-file-list:是否显示上传文件列表
      on-success:上传成功的函数
      before-upload:上传前的函数，限制上传文件的大小与类型
     -->

    <el-upload :show-file-list="false" action="http://119.91.150.211:8080/heimamm/public/uploads" name="image" :on-success="onSuccess" :before-upload="beforeAvatarUpload">
      <img v-if="imgUrl" :src="imgUrl" alt="">
      <button v-else>点击上传</button>
    </el-upload>

  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: ''
    }
  },
  methods: {
    onSuccess(res) {
      this.imgUrl = 'http://119.91.150.211:8080/heimamm/public/' + res.data.file_path
      console.log('上传成功', res)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style>
</style>
